<template>
	<div class="shopCart">
		<div class="content">
			<div class="content-left">
				<div class="logo-wrapper" @click="toggleShow">
					<div class="logo" :class="{light:totalCount>0}">
						<i class="icon-shopping_cart" :class="{light:totalCount>0}"></i>
					</div>
					<div class="num" v-show="totalCount>0">{{totalCount}}</div>
				</div>
				<div class="price">
					<span :class="{light:totalPrice>0}">￥{{totalPrice}}</span>
				</div>
				<div class="desc">
					另需配送费￥{{deliveryPrice}}
				</div>
			</div>
			<div class="content-right">
				<div class="pay" :class="payClass">{{payDesc}}</div>
			</div>
		</div>
		<transition name="cartList-transition"
					enter-active-class="animated fadeInUp"
					leave-active-class="animated fadeOutDown">
		<div class="cart-list" v-show="listShow">
			<div class="list-header">
				<h1 class="title">购物车</h1>
				<span class="empty" @click="clearCart">清空</span>
			</div>
			<div class="list-content" ref="listContent">
				<ul>
					<li class="food" v-for="food in selectFoods">
						<span class="name">{{food.name}}</span>
						<span class="price">￥{{food.price}}</span>
						<div class="control-wrapper">
							<cartcontrol :food="food"></cartcontrol>
						</div>
					</li>
				</ul>
			</div>
		</div>
		</transition>
		<transition name="background-transiton"
					leave-active-class="animated fadeOut"
					enter-active-class="animated fadeIn">
		<div class="background-wrapper" v-show="listShow"></div>
		</transition>
	</div>
</template>

<script>
	import cartcontrol from '@/components/cartControl.vue'
	import BScroll from 'better-scroll'
	export default{
		name:'shopCart',
		data(){
			return{
				toggle:false
			}
		},
		components:{
			cartcontrol
		},
		methods:{
			toggleShow(){
				this.toggle=!this.toggle
			},
			clearCart(){
				if(this.selectFoods){
					for(let item of this.selectFoods){
						item.count=0
					}
					this.toggle=false
				}
			}
		},
		props:{
			deliveryPrice:{
				type:Number,
				default:0
			},
			minPrice:{
				type:Number,
				default:0
			},
			selectFoods:{
				type:Array,
				default(){
					return[
					]
				}
			}
		},
		computed:{
			listShow(){
				if(!this.totalCount){
					this.toggle=true
					return false
				}
				let flag=!this.toggle
				if(flag){
					this.$nextTick(()=>{
						if(!this.scroll){
							this.scroll=new BScroll(this.$refs.listContent,{click:true})
						}else{
							this.scroll.refresh()
						}
					})
				}
				
				return flag
			},
			//计算总价
			totalPrice(){
				let total=0
				for(let food of this.selectFoods){
					total+=food.price*food.count
				}
				return total
			},
			//计算一个商品的总的数量
			totalCount(){
				let count=0
				for(let food of this.selectFoods){
					count+=food.count
				}
				//console.log(count)
				return count
				
			},
			//定义显示的class值
			payClass(){
				if(this.totalPrice===0){
					return ''
				}else if(this.totalPrice<this.minPrice){
					return 'not-enough'
				}else{
					return 'enough'
				}
			},
			//定义显示的文本
			payDesc(){
				if(this.totalPrice==0){
					return `￥${this.minPrice}元起送`
				}else if(this.totalPrice<this.minPrice){
					let deff=this.minPrice-this.totalPrice
					return `还差￥${deff}元起送`
				}else{
					return '去结算'
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '../common/style/mixin.scss';
	.shopCart{
		position: fixed;
		left: 0;
		bottom: 0;
		height: 48px;
		width: 100%;
		z-index: 50;
		.content{
			display: flex;
			background-color: #141d27;
			height: 100%;
			font-size: 0;
			.content-left{
				flex: 1;
				.logo-wrapper{
					display: inline-block;
					position: relative;
					width:44px;
					height: 44px;
					border-radius: 50%;
					top: -10px;
					margin: 0 12px;
					padding: 6px;
					background-color: #141d27;
					.logo{
						width: 100%;
						height: 100%;
						background-color: #2b343c;
						border-radius: 50%;
						text-align:center;
						.icon-shopping_cart{
							display: inline-block;
							font-size: 24px;
							line-height: 24px;
							color: rgba(255,255,255,0.4);
							margin-top: 10px;
						}
						.light{
							color: #fff;
						}
					}
					.light{
						background-color: rgb(0,160,220);
					}
					.num{
						position: absolute;
						right: 0;
						top: 0;
						background-color: rgb(240,20,20);
						width: 24px;
						height: 16px;
						line-height: 16px;
						border-radius: 16px;
						font-size: 9px;
						color: #fff;
						text-align: center;
						font-weight: 700;
					}
				}
				.price{
					display: inline-block;
					margin-top: 12px;
					padding-right: 12px;
					vertical-align: top;
					font-size: 16px;
					line-height: 24px;
					font-weight: 700;
					color: rgba(255,255,255,0.4);
					border-right: 1px solid rgba(255,255,255,0.1);
					.light{
						color: #fff;
					}
				}
				.desc{
					display: inline-block;
					vertical-align: top;
					padding: 0 12px;
					margin-top: 12px;
					font-size: 12px;
					line-height: 24px;
					color: rgba(255,255,255,0.4);
				}
			}
			.content-right{
				flex: 0 0 105px;
				width: 105px;
				.pay{
					height: 48px;
					line-height: 48px;
					font-size:14px;
					color: rgba(255,255,255,0.4);
					font-weight: 700;
					text-align: center;
					background-color:#2b343c;
				}
				.not-enough{
					color: #fff;
					background-color: rgb(240,20,20);
				}
				.enough{
					color: #fff;
					background-color:#42b983
				}
			}
		}
		.cart-list{
			position: absolute;
			left: 0;
			bottom: 48px;
			width: 100%;
			z-index: -1;
			.list-header{
				height: 40px;
				line-height: 40px;
				padding: 0 18px;
				background-color: #f3f5f7;
				border-bottom: 1px solid rgba(7,17,27,0.1);
				.title{
					display: inline-block;
					font-size: 14px;
					font-weight: 200;
					color: rgb(7,17,27);
				}
				.empty{
					float: right;
					font-size: 12px;
					color: rgb(0,160,220)
				}
			}
			.list-content{
				max-height: 217px;
				padding: 0 18px;
				background: #fff;
				overflow: hidden;
				.food{
					position: relative;
					padding: 12px 0;
					@include border-1px(rgba(7,17,27,0.1));
					.name{
						font-size: 14px;
						line-height: 24px;
						color: rgb(7,17,27);
						font-weight: 700;
					}
					.price{
						position: absolute;
						right: 96px;
						bottom: 12px;
						font-size: 14px;
						font-weight: 700;
						color: rgba(240,20,20);
					}
					.control-wrapper{
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
			}
		}
		.background-wrapper{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			background-color: rgba(7,17,27,0.7);
			z-index: -2;
		}
	}
</style>
